<template>
  <div>
    <div class="naviga">{{$store.state.marketName}}&nbsp;>&nbsp;电视机品类&nbsp;>&nbsp;市场可获得性</div>
    <div class="col-xs-12">
      <span>已选型号</span>
      <el-tag
        style="margin-left: 5px"
        v-for="tag in tags"
        :key="tag.name"
        closable
        :type="tag.type">
        {{tag.name}}
      </el-tag>
      <span class="pull-right">
        <span class="demonstration">选择日期</span>
        <el-date-picker
          v-model="value"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2">
      </el-date-picker>
      </span>
    </div>
    <div class="col-xs-12 border-r margin-top">
      <div class="sub-title">市场可获得性</div>
      <div class="col-xs-6">
        <div id="myChart" style="width: 99%;height: 400px"></div>
      </div>
      <div class="col-xs-6">
        <div id="myChart2" style="width: 99%;height: 400px"></div>
      </div>
    </div>
    <div>
      <div style="width: 50%" class="pull-left margin-top">
        <div class="border-r2">
          <div class="sub-title">竞争力评估</div>
          <div id="myChart3" style="width: 99%;height: 300px"></div>
        </div>
      </div>
      <div style="width: 50%" class="pull-right margin-top">
        <div class="border-r">
          <div class="sub-title">投资收益预设</div>
          <div id="myChart4" style="width: 99%;height: 300px"></div>
        </div>
      </div>
    </div>
    <div>
      <div style="width: 50%" class="pull-left margin-top">
        <div class="border-r2">
          <div class="sub-title">市场宏观趋势</div>
        </div>
      </div>
      <div style="width: 50%" class="pull-right margin-top">
        <div class="border-r">
          <div class="sub-title">目标市场草案</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value: '',
        tags: [
          { name: '天际', type: '' },
          { name: '美的', type: 'success' },
          { name: '小熊', type: 'info' },
          { name: '九阳', type: 'warning' }
        ],
        myChart:{},
        myChart2:{},
        myChart3:{},
        myChart4:{},
      };
    },
    methods: {
      drawMap(){
        this.myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 450000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            // 文本，默认为数值文本
            calculable: true,
            color:['#36A5F6','#FFFFFF']
          },
          series: [
            {
              name: '2016年',
              type: 'map',
              mapType: 'china',
              roam: false,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#389BB7',
                  areaColor: '#fff',
                },
                emphasis: {
                  areaColor: '#389BB7',
                  borderWidth: 0
                }
              },//修改鼠标hover上去的默认颜色
              data:[
                {name: '北京',value:8055
                },
                {name: '天津',value:7841
                },
                {name: '上海',value:3795
                },
                {name: '重庆',value:10812
                },
                {name: '河北',value:104338
                },
                {name: '河南',value:171164
                },
                {name: '云南',value:56721
                },
                {name: '辽宁',value:71252
                },
                {name: '黑龙江',value:48968
                },
                {name: '湖南',value:81334
                },
                {name: '安徽',value:205073
                },
                {name: '山东',value:66636
                },
                {name: '新疆',value:30084
                },
                {name: '江苏',value:117767
                },
                {name: '浙江',value:145969
                },
                {name: '江西',value:94056
                },
                {name: '湖北',value:120804
                },
                {name: '广西',value:43284
                },
                {name: '甘肃',value:28531
                },
                {name: '山西',value:54353
                },
                {name: '内蒙古',value:38492
                },
                {name: '陕西',value:102308
                },
                {name: '吉林',value:42884
                },
                {name: '福建',value:67024
                },
                {name: '贵州',value:47112
                },
                {name: '广东',value:217843
                },
                {name: '青海',value:5024
                },
                {name: '西藏',value:2419
                },
                {name: '四川',value:401656
                },
                {name: '宁夏',value:12623
                },
                {name: '海南',value:7610
                },
                {name: '台湾',value:0 },
                {name: '香港',value:0 },
                {name: '澳门',value:0 }
              ]
            },
          ]
        });
      },
      drawBar(){
        this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        this.myChart2.setOption({
          color:['#A196E5','#3DC4D8','#9D8EEC','#4EC6B1'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data:['美的','天际','小熊','九阳'],
            right:0
          },
          yAxis : [
            {
              type : 'category',
              data : ['四川','广东','湖南','新疆','湖北','浙江','北京']
            }
          ],
          xAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'美的',
              type:'bar',
              barWidth:'5px',
              data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
              name:'天际',
              type:'bar',
              barWidth:'5px',
              data:[120, 132, 101, 134, 90, 230, 210]
            } ,
            {
              name:'小熊',
              type:'bar',
              barWidth:'5px',
              data:[120, 132, 101, 134, 90, 230, 210]
            } ,
            {
              name:'九阳',
              type:'bar',
              barWidth:'5px',
              data:[120, 132, 101, 134, 90, 230, 210]
            }
          ]
        });
      } ,
      drawBar2(){
        this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
        // 绘制图表
        this.myChart3.setOption({
          color:['#A196E5','#3DC4D8','#9D8EEC','#4EC6B1'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data:['正面', '负面']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'value'
            }
          ],
          yAxis : [
            {
              type : 'category',
              axisTick : {show: false},
              data : ['周一','周二','周三','周四','周五','周六','周日']
            }
          ],
          series : [
            {
              name:'正面',
              type:'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true
                }
              },
              data:[320, 302, 341, 374, 390, 450, 420]
            },
            {
              name:'负面',
              type:'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'left'
                }
              },
              data:[-120, -132, -101, -134, -190, -230, -210]
            }
          ]
        });
      },
      drawLine(){
        this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
        // 绘制图表
        this.myChart4.setOption({
          color:['#A196E5','#3DC4D8','#9D8EEC','#4EC6B1'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data:['美的','天际','小熊','九阳'],
            right:0
          },
          xAxis : [
            {
              type : 'category',
              data : ['四川','广东','湖南','新疆','湖北','浙江','北京']
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'美的',
              type:'bar',
              barWidth:'5px',
              data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
              name:'天际',
              type:'bar',
              barWidth:'5px',
              data:[120, 132, 101, 134, 90, 230, 210]
            } ,
            {
              name:'小熊',
              type:'line',
              data:[120, 132, 101, 134, 90, 230, 210]
            } ,
            {
              name:'九阳',
              type:'line',
              data:[120, 132, 101, 134, 90, 230, 210]
            }
          ]
        });
      } ,
    },
    mounted: function () {
      this.drawMap();

      this.drawBar();
      this.drawBar2();
      this.drawLine();
      window.onresize = this.myChart.resize=this.myChart2.resize=this.myChart3.resize=this.myChart4.resize
    }
  };
</script>
